<template>
  <el-dialog
    v-bind="$attrs"
    :title="title"
    v-model="dialogVisible"
    :modal="modal"
    :width="width"
    :before-close="handleClose">
    <slot name="body">
      <div class="notDataList">暂无数据</div>
    </slot>
    <template #footer v-if="btnData.length > 0">
      <span class="dialog-footer" >
        <el-button
            class="btn-2"
						v-for="item in btnData"
						:key="item"
						@click="handleClick(item.name, dialogVisible)"
						size="small"
					>
						{{ item.name }}
					</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">

import { defineComponent, ref, watch, PropType } from 'vue'
export interface BtnData {
	name: string,
	func: Function
}
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "默认"
    },
    width: {
      type: String,
      default: "40%"
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    btnData: {
      type: Array as PropType<BtnData[]>,
			default: [],
    },
    modal: {
      type: Boolean,
      default: true
    }
  },
  emits:['handleClose'],
    setup(props, ctx) {
      let  dialogVisible = ref(false)
      const handleClose = () => {
        ctx.emit('handleClose', false)
      }

      const handleClick = (name: string, val: boolean) => {
			for (const item of props.btnData) {
          if (item.name === name) {
					item.func(val);
				}
				
			}
		};

      return {
        handleClose,
        dialogVisible,
        handleClick
      }
    }
})
</script>

<style scoped lang="scss">
.notDataList {
  text-align: center;
  color: #ccc;
}
</style>